<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-熊猫课程</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #course{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        overflow: hidden;
      }
      #course .container{
        position: absolute;
        width: 1280px;
        height: 720px;
        display: none;
      }
      #course .active{
        display: block;
      }
      #course img{
        position: absolute;
      }
      #btn{
        position: absolute;
        z-index: 1;
        left: 60px;
        bottom: 80px;
      }
      #btn .item-1{
        left: 165px;
      }
      #btn .btn{
        position: absolute;
        width: 135px;
        height: 50px;
        background: url(./images/course_btn_bg.jpg);
      }
      #btn .btn-1 {
        background-position: 0 -50px;
      }
      #btn .btn-2 {
        background-position: 0 -100px;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="course"></div>
      <div id="btn"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/course.js"></script>
    <script>
      var hanlderEnter = {
        'btn-0': function () {
          if (course.index > 0){
            course.prev = course.index === 1 ? 'btn-1' : 'btn-0'
            course.index--
            course.toggleItem()
          }
        },
        'btn-1': function () {
          var courseLen = page.data.course.length
          if (course.index < (courseLen - 1)) {
            course.prev = course.index === courseLen- 2 ? 'btn-2' : 'btn-1'
            course.index++
            course.toggleItem()
          }
        },
        'btn-2': function () {
          dialog.show('课程已完成！')
        }
      }

      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "")
        course.init(typeId)
        // var elId = utils.getUrlParam("elId", "")
        // var dom = document.getElementById(elId || "btn-1")
        // console.log(dom)
        // dom && utils.toggleClass(dom)
        // getData(typeId)
      }

      // function getData (typeId) {
      //   var series = getVodListByTypeId({TYPEID: typeId}).data[0]
      //   var course = getVodDetailInfo(series.ID)
      //   page.data.course = course
      //   // console.log(course)
      // }

      function init () {
        page.init({
          isRenderBg: false
        })
        dialog.init()
        getPreFocus()
        log.commit({
          name: '熊猫课程页面',
          type1: 'browse',
          type2: 'course',
          starttime: new Date().getTime(),
        })

      }

      function keyUp () {}

      function keyDown () {}

      function keyLeft () {
        if (!dialog.visible) {
          if (course.mark) return 
          var dom = move.left();
          dom && utils.toggleClass(dom);
        }
      }

      function keyRight () {
        if (!dialog.visible) {
          if (course.mark) return 
          var dom = move.right();
          dom && utils.toggleClass(dom);
        }
      }

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          if (course.mark) return 
          var info = utils.getCurInfo()
          hanlderEnter[info.id]()
          // console.log(info)
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
